<template>
    <view>
        <view class="box" @tap="showStationBtn">
            <view class="centers">
                <text>卡位管理</text>
            </view>
            <view class="centers">
                <text>{{ userObj.station }}位</text>
                <image class="icon-32" :src="imgUrl + 'right.png'"></image>
            </view>
        </view>
        <view class="box1">
            <view class="content">门店端闲置卡位数量设置，卡位数量根据实际情况设定，否则会导致顾客来店后无法进行服务。</view>
            <view class="content">
                <text>门店卡位数量设定规则：</text>
                <view class="content1">卡位数量最少为"1",最多"50",系统初始默认"3"个卡位;临时增加卡位数不做限制,随时可以添加。</view>
            </view>
            <view class="content">
                <text>减少卡位数需满足条件：</text>
                <view class="content1">近七天内预约服务时间重叠的订单等于或小于卡位数才能修改卡位。</view>
            </view>
        </view>
        <!-- 弹窗 -->
        <view class="modal-mask" @tap="hideStationModal" v-if="showStationModal"></view>
        <view class="modal-dialog" v-if="showStationModal">
            <view class="modal-title">修改卡位</view>
            <view class="modal-content">
                <view class="modal-input">
                    <text class="lable">卡位：</text>
                    <input
                        placeholder-class="input-holder"
                        type="number"
                        maxlength="10"
                        class="input"
                        placeholder="请输入卡位"
                        @input="handleinput"
                        @blur="stationblur"
                        :value="storeStation"
                    />
                </view>
            </view>
            <view class="modal-footer">
                <view class="btn-cancel" @tap="onStationCancel" data-status="cancel">取消</view>
                <view class="btn-confirm" @tap="onStationConfirm" data-status="confirm">确定</view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/yidou/index.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

const { isNull } = require('../../utils/util.js');

export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            showStationModal: false,

            storeStation: '',

            userObj: {
                station: ''
            },

            showModal: false
        };
    },
    onLoad: function () {
        this.onLoadClone3389();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        onLoadClone3389: function () {
            // 获取用户个人信息
            _request
                .get('/storeCenterInfo/getStoreCenterInfo', {
                    id: uni.getStorageSync('userid')
                })
                .then((res) => {
                    this.setData({
                        userObj: res.data.data
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        stationblur: function (e) {
            this.setData({
                storeStation: e.detail.value
            });
        },

        handleinput: function (e) {
            this.setData({
                storeStation: e.detail.value
            });
        },

        showStationBtn: function () {
            this.setData({
                showStationModal: true
            });
        },

        hideStationModal: function () {
            this.setData({
                showStationModal: false
            });
        },

        onStationCancel: function () {
            this.setData({
                storeStation: ''
            });
            this.hideStationModal();
        },

        onStationConfirm: function () {
            if (!this.storeStation || isNull(this.storeStation)) {
                uni.showToast({
                    title: '卡位不能为空',
                    icon: 'none',
                    duration: 2000
                });
                return;
            }

            _request
                .postObj('/storeCenterInfo/updateStation', {
                    storeId: uni.getStorageSync('storeId'),
                    storeStation: this.storeStation.trim()
                })
                .then((res) => {
                    this.setData({
                        storeStation: ''
                    });

                    if (res.data.code === 200) {
                        uni.showToast({
                            title: '修改成功',
                            icon: 'success',
                            duration: 2000
                        });
                        this.onLoadClone3389({});
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                            duration: 2000
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });

            this.hideStationModal();
        },

        /**
         * 弹出框蒙层截断touchmove事件
         */
        preventTouchMove: function () {},

        /**
         * 隐藏模态对话框
         */
        hideModal: function () {
            this.setData({
                showModal: false
            });
        },

        /**
         * 对话框取消按钮点击事件
         */
        onCancel: function () {
            this.hideModal();
        },

        /**
         * 对话框确认按钮点击事件
         */
        onConfirm: function () {
            this.hideModal();
        }
    }
};
</script>
<style>
.box {
    background: #ffffff;
    border-radius: 10rpx;
    box-sizing: border-box;
    margin: 30rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    padding: 20rpx;
}

.box1 {
    background: #ffffff;
    border-radius: 10rpx;
    box-sizing: border-box;
    margin: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: column;
    align-content: center;
}

.content {
    font-size: 32rpx;
    margin: 20rpx;
}

.content1 {
    color: rgb(180, 180, 180);
}

/**index.wxss**/
.show-btn {
    margin-top: 100rpx;
    color: #22cc22;
}
.modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden;
    z-index: 9000;
    color: #fff;
}
.modal-dialog {
    width: 540rpx;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 9999;
    background: #ffffff;
    margin: -180rpx 105rpx;
    border-radius: 10rpx;
}
.modal-title {
    padding-top: 50rpx;
    font-size: 36rpx;
    color: #333333;
    text-align: center;
}
.modal-content {
    padding: 50rpx 32rpx;
}
.modal-input {
    display: flex;
    background: #f6f6f6;
    border-radius: 4rpx;
    font-size: 28rpx;
}

.lable {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
}
.input {
    height: 82rpx;
    font-size: 28rpx;
    line-height: 28rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    color: #333;
}
input-holder {
    color: #666;
    font-size: 28rpx;
}

.modal-footer {
    display: flex;
    flex-direction: row;
    height: 86rpx;
    border-top: 1px solid #dedede;
    font-size: 34rpx;
    line-height: 86rpx;
}
.btn-cancel {
    width: 50%;
    color: #333;
    text-align: center;
    border-right: 1px solid #dedede;
}
.btn-confirm {
    width: 50%;
    color: #ff8722;
    text-align: center;
}

page {
    background-color: #fbfbfb;
}
</style>
